<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <el-dialog
    title=""
    :visible.sync="Show"
    :fullscreen='true'
    :show-close='false'
    append-to-body
    custom-class="fulldialog route-dialog"
    :close-on-press-escape='false'>
    <!-- 自定义关闭按钮 -->
    <div class="dialog-header-wrap line-with-verticl">
      <div class="line-with-verticl"></div>
      <div class="dialog-header-handle">
        <div class="plantitle">{{routeStName}}</div>
        <div class="handle-tools">
          <div class="dialog-handle-items" @click="closeDialog"><i class="el-icon-close"></i></div>
        </div>
      </div>
    </div>
    <el-container>
      <el-header style="height: 0"></el-header>
      <el-main>
        <el-container>
          <el-aside width="250px" class="flex-left-pannel_withline">
            <div class="pickup-wrap">
              <div class="pickup-title"><i class="el-icon-caret-right"></i>室内巡检路线</div>
              <el-scrollbar style="height:72vh">
                <ul class="pickup-list">
                  <li class="pickup-list-items" v-loading="leftListLoading" v-for="(item,index) in routelist" :key="item.buildingId" v-if="routelist.length>0">
                    <div class="pickup-list-item">
                      <div class="pickup-list-item__buildname">
                        <div class="pickup-index"><span class="pickup-index-icon">{{index+1}}</span>{{item.bName}}</div>
                        <div class="pickup-del" @click="deleteRoute('build',item.buildingId)"><i class="el-icon-delete"></i></div>
                      </div>
                      <ul class="pickup-list-item__routes">
                        <li v-for="faci in item.label">
                          <div class="faci-with-nowrap" :title="faci.equipmentType+'('+faci.floor+'F-'+faci.positionDescription+')'">{{faci.equipmentType}}({{faci.floor}}F-{{faci.positionDescription}})</div>
                          <div class="pickup-item-del" @click="deleteRoute('id',faci.id)"><i class="el-icon-delete"></i></div>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li v-if="routelist.length<1"><p>暂无路线</p></li>
                </ul>
              </el-scrollbar>
              <div class="route-name-wrap">
                <p style="font-size: 14px;color: rgba(255,255,255,.7)"><i style="color:#f56c6c;padding-right: 5px">*</i>巡检路线名称</p>
                <el-row class="route-name-input"><el-input v-model.trim="editRouteName" placeholder="请输入路线名" :maxlength="30"></el-input></el-row>
                <el-row class="route-name-btns">
                  <el-button size="mini" type="primary" @click="updateRoute">保存</el-button>
                  <el-button type="text" @click="cancelUpdate">取消</el-button>
                </el-row>
              </div>
            </div>
          </el-aside>
          <el-container>
            <div class="flex-left-pannel">
              <el-row>
                <div class="xf-tabletop-handles">
                  <div class="xf-tabhd-left">
                    <span class="xf-tabhd-title"><i class="el-icon-caret-right"></i>设施管理</span>
                    <el-button class="filter-item" @click="addToroute" type="primary" size="mini">添加到巡检路线</el-button>
                  </div>
                  <div class="xf-tabhd-right">
                    设施编号
                    <el-input v-model="listQuery.facilitiesNo" placeholder="请输入设施编号" class="xf-query-input" clearable size="mini"></el-input>
                    <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
                    <el-popover
                      placement="bottom-end"
                      width="700"
                      class="xf-custom-poper"
                      @show="getSelected"
                      v-model="visible2">
                      <div class="xf-double-form">
                        <div class="xf-dbform-item">
                          <div class="xf-dbform-item__sleft">
                            <p class="xf-dbform-item__label">设施类型</p>
                            <el-select placeholder="请选择设施类型" v-model="slistQuery.equipmentType">
                              <el-option label="全部" value="全部"></el-option>
                              <el-option :label="item" :value="item" v-for="item in equipmentTypeList" :key="item"></el-option>
                            </el-select>
                          </div>
                          <div class="xf-dbform-item__sright">
                            <p class="xf-dbform-item__label">楼层</p>
                            <el-input v-model="slistQuery.floorId" placeholder="请输入楼层"></el-input>
                          </div>
                        </div>
                        <div class="xf-dbform-item">
                          <div class="xf-dbform-item__sleft">
                            <p class="xf-dbform-item__label">位置描述</p>
                            <el-input v-model="slistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                          </div>
                        </div>
                      </div>
                      <div style="text-align: left; margin: 20px 0 0 0;">
                        <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
                        <el-button type="text" @click="visible2 = false">取消</el-button>
                      </div>
                      <el-button slot="reference" type="text" size="mini">高级查询</el-button>
                    </el-popover>
                  </div>
                </div>
              </el-row>
              <el-table
                key='tableKey'
                :data="list"
                ref="multipleTable"
                v-loading="listLoading" fit style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column label="设施编号">
                  <template slot-scope="scope">
                    <span>{{scope.row.facilitiesNo}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="设施类型">
                  <template slot-scope="scope">
                    <span>{{scope.row.equipmentType}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="所属建筑">
                  <template slot-scope="scope">
                    <span>{{scope.row.bName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="楼层">
                  <template slot-scope="scope">
                    <span>{{scope.row.floor}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="位置描述">
                  <template slot-scope="scope">
                    <span>{{scope.row.positionDescription}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div v-show="!listLoading" class="sensor-pagination-container">
                <div>
                  <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!==0">全选</el-checkbox>
                  <el-button type="text" style="margin-left: 10px;" @click="addToroute" v-show="list&&list.length!==0" :disabled="checklist&&checklist.length===0">添加到巡检路线</el-button>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
              </div>
            </div>
          </el-container>
          <el-aside width="250px" class="flex-right-pannel_withline">
            <el-scrollbar style="height:85vh">
              <div class="comm-tree-wrap">
                <div class="wrap-with-halfboder"></div>
              <p class="right-tree-title"><i class="el-icon-caret-right"></i>建筑列表</p>
              <el-button type="text" @click="viewAllTree" style="padding-left:5px;color: rgba(255, 255, 255, 0.7);;">查看全部</el-button>
              <el-tree class="filter-tree"
                       :data="treeData"
                       node-key="code"
                       highlight-current
                       :expand-on-click-node='false'
                       :props="defaultProps"
                       ref="cityTree"
                       @current-change="changeClick"
                       default-expand-all>
            <span class="build-custom-tree-node" slot-scope="{ node, data }">
              <span :title="node.label" v-if="node.label.length>7">{{ node.label.substring(0,7)+"..." }}</span>
              <span :title="node.label" v-else>{{ node.label }}</span>
            </span>
              </el-tree>
              </div>
            </el-scrollbar>
          </el-aside>
        </el-container>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
  //树形api
  import {
    fetchTree,
  } from "@/api/device/deviceBuilding/index";

  import {
    facilityType
  } from "@/api/device/facilityType/index";

  import {
    pageFacility,
    innerRoutes,
    innerRouteAdd,
    deleteRoutes,
    updateRoutes
  } from "@/api/device/inspectManager/index";

    export default {
        name: "insiderHandle",
        props:{
          Show: {
            required: true,
            default: false
          },
          id: {
            type: String,
            default: ""
          },
          routeStName: {
            type: String,
            default: ""
          },
          routeName: {
            type: String,
            default: ""
          },
        },
      data(){
          return {
            editRouteName:"",
            visible2:false,
            isselall:false,
            isIndeterminate:false,
            checklist:[],
            addfacityid:[],
            equipmentTypeList:[],
            treeData: [],
            routelist:[],
            defaultProps: {
              children: "childList",
              label: "name",
              classval:"status"
            },
            listQuery:{
              page: 1,
              limit: 10,
              facilitiesNo:'',
              ids: '-1'
            },
            slistQuery:{
              equipmentType:'全部',
              positionDescription:'',
              floorId:'',
            },
            listLoading:false,
            leftListLoading:false,
            list:[],
            total: null,
          }
      },
      methods:{
        init(){
          // 初始化
          fetchTree().then(data => {
            if (data.data.length!==0) {
              this.treeData = data.data;
            }else{
            }
          });
          this.editRouteName = JSON.parse(JSON.stringify(this.routeName))
          this.getList();
          this.getRoutes(this.id);
        },
        updateRoute(){
          //更新路线名
          updateRoutes({id:this.id,routeName:this.editRouteName}).then(res=>{
            if (res.status===200){
              this.$emit("update:Show", false);
              this.$emit("updateList");
            }
          })
        },
        cancelUpdate(){
          this.$emit("update:Show", false);
          this.$emit("updateList");
        },
        getRoutes(id){
          this.leftListLoading = true;
          innerRoutes({id:id}).then(res=>{
            this.leftListLoading = false;
            this.routelist = res.data;
          })
        },
        deleteRoute(type,id){
          if (type==='build') {
          //  删除路线建筑
            deleteRoutes({id:this.id,buildingId:id}).then(res=>{
              this.getRoutes(this.id);
              this.getList();
            })
          }
          if (type==='id'){
          //  删除路线
            deleteRoutes({id:this.id,ids:id}).then(res=>{
              this.getRoutes(this.id);
              this.getList();
            })
          }
        },
        changeClick(data) {
          //重置查询条件
          this.restQuery();
          this.isselall = false;
          this.isIndeterminate = false;
          if (data.childList) {
            // 如果有下层，隐藏下载按钮
            this.listLoading = true;
            this.listQuery.ids = undefined;
            this.listQuery.code = data.code;
            pageFacility(this.listQuery).then(data => {
              this.list = data.data.rows;
              this.total = data.data.total;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            })
          } else {
            this.listLoading = true;
            this.listQuery.ids = data.code;
            this.listQuery.code = undefined;
            pageFacility(this.listQuery).then(data => {
              this.list = data.data.rows;
              this.total = data.data.total;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            })
          }
        },
        handleSelectionChange(val){
          this.checklist=[...val];
          let length = this.total>this.list.length?this.list.length:this.total;
          if (val.length===length) {
            this.isselall=true;
            this.isIndeterminate=false;
          }else{
            this.isselall=false;
            this.isIndeterminate=true;
          }
          if (val.length===0) {
            this.isIndeterminate=false;
          }
        },
        handleCheckAllChange(){
          this.$refs.multipleTable.toggleAllSelection();
        },
        handleSizeChange(val) {
          this.listQuery.limit = val;
          this.getList();
        },
        handleCurrentChange(val) {
          this.listQuery.page = val;
          this.getList();
        },
        viewAllTree(){
          //树形结构
          this.$refs.cityTree.setCurrentKey(null);
          this.listLoading = true;
          this.listQuery.ids = '-1';
          this.listQuery.code = undefined;
          this.getList();
        },
        getSelected(){
          //高级查询获取设施类型
          facilityType().then(res => {
            this.equipmentTypeList = res.data;
          })
        },
        tableQuery(){
          //普通查询
          this.restQuery();
          this.getList();
        },
        pointerQuery(){
          // 高级查询
          this.visible2 = false;
          this.listLoading = true;
          // 取消绑定并合并查询条件
          this.slistQuery.floorId += "";
          let contactKeys = Object.assign({},JSON.parse(JSON.stringify(this.listQuery)),JSON.parse(JSON.stringify(this.slistQuery)))
          pageFacility(contactKeys).then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          });
        },
        getList(){
        // 获取table列表
          this.isselall = false;
          this.isIndeterminate = false;
          this.listLoading = true;
          pageFacility(this.listQuery).then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        },
        restQuery(){
          //重置高级查询条件
          this.slistQuery.equipmentType = '全部';
          this.slistQuery.positionDescription = '';
          this.slistQuery.floorId = '';
        },
        addToroute(){
          this.addfacityid=[];
          this.checklist.forEach((item)=>{
            this.addfacityid.push(item.id);
          });
        // 添加路线
          if (this.addfacityid.length>0){
            innerRouteAdd({id:this.id,ids: (this.addfacityid).toString()}).then(res=>{
              if (res.status===200){
                this.getRoutes(this.id);
                this.getList();
              }
            })
          } else {
            this.$message({
              message: '暂未选择路线',
              type: 'warning'
            });
          }
        },
        closeDialog(){
          //当面板关闭(点击关闭按钮)
          this.$emit("update:Show", false);
          this.$emit("updateList");
        }
      },
      watch: {
        Show(v) {
          if (v) {
            let self = this;
            this.$nextTick(() => {
              self.init();
            });
          } else {
            this.restQuery();
            this.listQuery.ids = '-1';

          }
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
  .faci-with-nowrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .route-name-wrap{
    .route-name-btns{
      padding-top: 20px;
      .el-button{
        padding: 9px 25px;
      }
    }
  }
  .flex-right-pannel_withline {
    border-left: 1px solid transparent;
    min-height: 86vh;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree-node__label {
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .el-table th {
    background: #f5f7fa;
  }
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .sensor-pagination-container{
    display:flex;
    justify-content:space-between;
    padding:10px 10px;
  }
  .build-custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .fulldialog{
    &.route-dialog{
      &:before{
         border: 0;
      }
      .flex-left-pannel{
        padding-left: 30px;
        padding-bottom: 20px;
        height: calc(100vh - 60px);
        overflow-y: auto;
      }
      .flex-left-pannel_withline{
        min-height: 86vh;
        box-sizing: border-box;
        padding: 10px;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .pickup-wrap{
          height: 100%;
          .pickup-title{
            font-size: 18px;
            color: #50E3C2;
            font-weight: bold;
            line-height: 36px;
            i{
              opacity: 0.5;
            }
          }
          .pickup-list-item{
            padding: 10px;
            .pickup-list-item__buildname{
              display: flex;
              justify-content: space-between;
              cursor: pointer;
              font-size: 12px;
              color: #fff;
              font-weight: bold;
              padding-bottom: 10px;
              .pickup-index-icon{
                background:rgba(80, 227, 194,.6);
                color: #fff;
                display: inline-block;
                width: 14px;
                height: 14px;
                font-weight: normal;
                line-height: 14px;
                text-align: center;
                border-radius: 2px;
                margin-right: 15px;
              }
              .pickup-del{
                opacity: 0;
                color: #dfdfdf;
              }
              &:hover{
                .pickup-del{
                  opacity: 1;
                  transition: all .3s;
                }
              }
            }
            .pickup-list-item__routes{
              font-size: 12px;
              color:rgba(255, 255, 255,.7);;
              li{
                line-height: 24px;
                border-left: 1px solid rgba(80, 227, 194,.3);
                padding-left: 15px;
                margin-left: 6px;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
                position: relative;
                .pickup-item-del{
                  opacity: 0;
                  color: #dfdfdf;
                }
                &:hover{
                  color:rgba(255, 255, 255,.9);
                  .pickup-item-del{
                    opacity: 1;
                    transition: all .3s;
                  }
                  &::before{
                    content: '';
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: #50E3C2;
                    left: -4px;
                    top: 9px;
                    border-radius: 1px;
                  }
                }
              }
            }
          }
        }
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            margin-left: 0;
          }
        }
      }
      .el-checkbox{
        display: inline-block;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 24px;
        top: 14px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
